import { Graph } from '@antv/x6'
import { Button } from '@antv/x6/es/registry/tool/button'

const NodeRemove = Button.define({
  name: 'node-remove',
  width: 20,
  height: 20,
  markup: [{
    tagName: 'svg',
    className: 'node-tools top',
    selector: 'node-remove',
    attrs: {
      width: 18,
      height: 18,
      viewBox: '0 0 1024 1024'
    },
    children: [{
      tagName: 'path',
      attrs: {
        d: 'M216.127386 857.184717c0 54.490032 44.134173 98.624205 98.624205 98.624205l394.496819 0c54.490032 0 98.624205-44.134173 98.624205-98.624205L807.872614 265.439488 216.127386 265.439488 216.127386 857.184717zM857.184717 117.503181 684.591847 117.503181l-49.312102-49.312102L388.719232 68.191078l-49.312102 49.312102L166.815283 117.503181l0 98.624205 690.369434 0L857.184717 117.503181z'
      }
    }]
  }],
  onClick({ view }) {
    const node = view.cell
    const graph = view.graph
    graph.removeConnectedEdges(node)
    graph.removeNode(node)
  }
})

Graph.registerNodeTool('node-remove', NodeRemove, true)
